<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>HeRock漫画阅读</title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://unpkg.com/vue-lazyload@1.3.3/vue-lazyload.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,
    ol,
    li {
      list-style: none;
      line-height: 0;
    }

    i {
      font-style: normal;
      user-select: none;
      -webkit-user-drag: none;
    }

    img {
      user-select: none;
      pointer-events: none;
      -webkit-user-drag: none;
    }


    .upload {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      z-index: 1;
      height: 100px;
      width: 100px;
      background-color: #ccc;
      border-radius: 16px;
      text-align: center;
      cursor: pointer;
    }

    .upload:hover {
      background: #AADFFD;
      border-color: #78C3F3;
      color: #1733d4;
      text-decoration: none;
    }

    .upload.hide {
      left: auto;
      top: auto;
      right: 10px;
      bottom: 10px;
      transform: translate3d(0, 0, 0);
      border-radius: 50%;
      opacity: 0.1;
    }

    .upload.hide:hover {
      opacity: 1;
    }

    .upload i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      font-size: 20px;
      font-weight: 600;
    }

    .upload input {
      display: none;
    }

    .image-list {
      position: relative;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
    }

    .image-list::-webkit-scrollbar {
      display: none;
    }

    .image-item {
      position: relative;
    }

    .image-item i {
      position: absolute;
      right: 10px;
      bottom: 15px;
      font-size: 18px;
      font-weight: 600;
    }

    .image-item .image {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="upload" :class="{ 'hide': images.length > 0}" @click="handleUpload">
      <i>{{buttonText}}</i>
      <input type="file" ref="upload" multiple="multiple" @change="upload()">
    </div>
    <ul class="image-list">
      <li class="image-item" v-for="(img, index) of images">
        <i>第 {{index + 1}} 页</i>
        <img class="image" v-lazy="img.url" :key="img.url" :alt="img.name">
      </li>
    </ul>
  </div>
</body>
<script>
  Vue.use(VueLazyload, {
    preLoad: 5,
    listenEvents: ['scroll']
  })

  new Vue({
    el: '#app',
    data: () => {
      return {
        buttonText: '上传图片',
        images: [], // [{url, name}]
      }
    },
    mounted () {},
    methods: {
      getObjectURL (file) {
        let url = null;
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
          url = window.URL.createObjectURL(file);
        }
        return url;
      },
      handleUpload () {
        this.$refs.upload.click()
      },
      async upload () {
        let files = this.$refs.upload.files
        if (files.length < 1) {
          return
        }
        this.images = []
        for (let file of files) {
          let url = this.getObjectURL(file)
          let name = file.name
          this.images.push({ name, url })
        }
        window.scrollTo(0, 0)
        console.log(this.$Lazyload)
      }
    }
  })
</script>
</html>